<template>
  <view class="tui-addr-box">
    <form :report-submit="true">
      <tui-list-cell :hover="false" padding="0">
        <view class="tui-line-cell">
          <view class="tui-title">收货人</view>
          <input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="请输入收货人姓名" v-model="name" maxlength="15"
            type="text" />
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false" padding="0">
        <view class="tui-line-cell">
          <view class="tui-title">手机号码</view>
          <input placeholder-class="tui-phcolor" class="tui-input" name="mobile" placeholder="请输入收货人手机号码" type="number" v-model="telphone" maxlength="11"
           />
        </view>
      </tui-list-cell>
      <view class="tui-cell-class tui-list-cell tui-cell-arrow  tui-line-left " hover-class=" tui-cell-hover" style="background:#fff;fontSize:32rpx;color:#333;padding:26rpx 30rpx;"
        :hover-stay-time="150">
        <region-picker @change="region_change" :value="[350000,350100,350104]">
          <view class="picker" style="display: flex;align-items: center;justify-content: space-between;">
            <view>请选择地区</view>
            <view>{{city}}</view>
          </view>
        </region-picker>

      </view>
      <tui-list-cell :hover="false" padding="0">
        <view class="tui-line-cell">
          <view class="tui-title">收货地址</view>
          <input placeholder-class="tui-phcolor" class="tui-input" name="address" placeholder="请输入详细的收货地址" v-model="detail" maxlength="50"
            type="text" />
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false" padding="0">
        <view class="tui-line-cell">
          <view class="tui-cell-title">地址类型</view>
          <view class="tui-addr-label">
            <text v-for="(item,index) in lists" :key="index" class="tui-label-item" @tap="typeIndex=index" :class="{'tui-label-active':typeIndex==index}">{{item}}</text>
          </view>
        </view>
      </tui-list-cell>

      <!-- 默认地址 -->
      <tui-list-cell :hover="false" padding="0">
        <view class="tui-swipe-cell">
          <view>设为默认地址</view>
          <switch color="#0000ff" @change="changeDef" class="tui-switch-small" />
        </view>
      </tui-list-cell>
      <!-- 保存地址 -->
      <view class="tui-addr-save" @tap="saveAddress">
        <tui-button type="danger" height="88rpx">保存收货地址</tui-button>
      </view>
      <view class="tui-del" v-if="false">
        <tui-button type="gray" height="88rpx">删除收货地址</tui-button>
      </view>
    </form>
  </view>
</template>

<script>
  import tuiButton from "@/components/extend/button/button"
  import tuiListView from "@/components/list-view/list-view"
  import tuiListCell from "@/components/list-cell/list-cell"
  export default {
    components: {
      tuiButton,
      tuiListView,
      tuiListCell
    },
    data() {
      return {
        typeIndex: 0,
        lists: ["公司", "家", "学校", "其他"],
        city: "",
        name:"",
        telphone:"",
        detail:"",
        def:'0',//不是默认地址
      }
    },
    methods: {
      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.target.value)
        this.index = e.target.value
      },
      region_change(e) {
      
        this.city = ""
        for(let obj of e.detail.value){
          this.city += obj + "-"
        }
        this.city=this.city.substring(0,this.city.length-2)
      },
      changeDef(e) {
        if (e.detail.value) {
          this.def = 1
        } else {
          this.def = 0
        }
      },
      saveAddress(){
        this.$tui.request("address/insertOne",{
          name:this.name,
          telphone:this.telphone,
          province:this.city.split("-")[0],
          city:this.city.split("-")[1],
          country:this.city.split("-")[2],
          detail:this.detail,
          tag:this.typeIndex,
          def:this.def,
          userid:this.$store.state.userId
        },"POST",true)
        .then(res=>{
          if(res.code=="200"){
            uni.showModal({
              content:"添加成功",
              showCancel:false,
              success() {
                uni.navigateBack({
                  animationDuration:2000,
                  animationType:"pop-out"
                })
              }
            })
          }
        })
        .catch(res=>{
          
        })
      }
    }
  }
</script>

<style>
  .tui-addr-box {
    padding: 20rpx 0;
  }

  .tui-line-cell {
    width: 100%;
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .tui-title {
    width: 180rpx;
    font-size: 28rpx;
  }

  .tui-title-city-text {
    width: 180rpx;
    height: 40rpx;
    display: block;
    line-height: 46rpx;
  }

  .tui-input {
    width: 500rpx;
  }

  .tui-input-city {
    flex: 1;
    height: 40rpx;
    font-size: 28rpx;
    padding-right: 30rpx;
  }

  .tui-phcolor {
    color: #ccc;
    font-size: 28rpx;
  }

  .tui-cell-title {
    font-size: 28rpx;
  }

  .tui-addr-label {
    margin-left: 70rpx;
  }

  .tui-label-item {
    width: 76rpx;
    height: 40rpx;
    border: 1rpx solid rgb(136, 136, 136);
    border-radius: 6rpx;
    font-size: 26rpx;
    text-align: center;
    line-height: 40rpx;
    margin-right: 20rpx;
    display: inline-block;
    transform: scale(0.9);
  }

  .tui-label-active {
    background: #E41F19;
    border-color: #E41F19;
    color: #fff;
  }

  .tui-swipe-cell {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 10rpx 24rpx;
    border-radius: 6rpx;
    overflow: hidden;
    font-size: 28rpx;
  }

  .tui-switch-small {
    transform: scale(0.8);
    transform-origin: 100% center;
  }

  /* #ifndef H5 */
  .tui-switch-small .wx-switch-input {
    margin: 0 !important;
  }

  /* #endif */

  /* #ifdef H5 */
  >>>uni-switch .uni-switch-input {
    margin-right: 0 !important;
  }

  /* #endif */

  .tui-addr-save {
    padding: 24rpx;
    margin-top: 100rpx;
  }

  .tui-del {
    padding: 24rpx;
  }
</style>
